<template>
  <div class="container">
    <Navbars ></Navbars>
    <!-- 条件 -->
    <div class="querydiv" shadow="never">
      <el-form :inline="true" size="medium" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.name" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" label-width="90px">
          <el-input v-model="listQuery.name" placeholder="项目负责人"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button class="btn btncolor" type="primary" @click="getList">查询</el-button>
            <el-button class="btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div><el-button class="btncolor" size="small" icon="el-icon-plus" type="primary" @click="handleAdd">创建分支</el-button></div>
    </div>
    <!-- 表格 -->
    <el-row  :gutter="20">
        <el-col :span="6" class="colss mt15" v-for="(item,index) in tableData" :key="index">
            <el-card class="box-card">
                <div class="listcont" @click="handliteminfo(item)">
                  <div class="disflex spacebetween title">
                    <div>
                      <div>{{item.name}}</div>
                      <div class="lstime">{{item.createTime}}</div>
                    </div>
                    <i class="el-icon-more" style="margin-bottom:20px"></i>
                  </div>
                  <div class="disflex" style="margin-top:10px">
                    <div>编号：</div>
                    <div>{{item.code}}</div>
                  </div>
                  <div class="disflex" style="margin:10px 0">
                    <div>状态：</div>
                    <el-link :underline="false" type="primary">正常进行</el-link>
                  </div>
                  <div class="disflex">
                    <div>工期：</div>
                    <div>{{item.startTime}}至{{item.endTime}}</div>
                    <!-- <div>2024-06-08 02:00:00至2024-06-07 00:00:00</div> -->
                  </div>
                  <div class="btnlist">
                    <el-button type="primary" class="btncolor" size="small" @click.stop="handleEdit(item.id)">编辑</el-button>
                    <el-button type="primary" class="btncolor" size="small" @click.stop="handleTem(item)">成员管理</el-button>
                    <el-button type="primary" class="btncolor" size="small" @click.stop="handleDel(item)">删除</el-button>
                  </div>
                </div>
            </el-card>
        </el-col>
      <!--分页 -->
      <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num" @pagination="getList"></Pagination>
    </el-row>
    <!-- 项目弹窗 -->
    
  </div>
</template>

<script>
import { projectpage,projectdel} from '@/api/manager.js'
import { dicttype } from "@/api/role.js";
import Pagination from '@/components/Pagination'
export default {
  name: 'user',
  components: { Pagination },
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        page:1,
        num:10,
        name:'',
        code:'',
        icd9VId:'',
        icd10VId:'',
        status:'',
        startTime:'',
        endTime:''
      },
      tableData: [],
      version:'',
      statuslist:[],
    }
  },
  created() {
    this.getList()
    this.getDIctyp()
  },
  methods: {
    // 设置表格颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2==0) { return 'warning-row'}
      return '';
    },
    // 获取状态字典
    getDIctyp(){
      this.$getFlag().then(obj=>{
        dicttype({type:'upgrade_type'},obj.data).then(res=>{
          if(res.status == 200){
            this.statuslist = res.data
          }
        })
      })
    },
    // 获取表格列表信息
    getList() {
      this.OrganList = []
      this.$getFlag().then(obj=>{
        this.listLoading = false
        projectpage(this.listQuery,obj.data).then(response => {
          this.tableData = response.list
          this.total = Number(response.total)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      })
    },
    // 创建分支
    handleAdd(){
      this.$router.push({
        path: '/meneradd',
      })
    },
    // 详情页面
    handliteminfo(item){
      this.$router.push({
        path: '/teaminfo',
        query:{id:item.id}
      })
    },
    // 团队成员页面
    handleTem(item){
      
      this.$router.push({
        path: '/meruser',
        query:{id:item.id}
      })
    },
    // 删除
    handleDel(item){
      this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$getFlag().then(obj=>{
          projectdel({id:item.id,name:item.name},obj.data).then(res=>{
              if(res.status == 200){
                this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                this.getList()
              }else{
                this.$notify({ title: "操作失败",message: res.msg, type: "error", duration: 2000,});
              }
          })
        }) 
      })
      .catch(() => {});
    },
    // 编辑跳转
    handleEdit(id){
      this.$router.push({
        path: '/meneradd',
        query:{id:id}
      })
    },
    handleReset(){}
  }
}
</script>

<style scoped lang="scss">
::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
  display: none;
}
.listcont{
  .title{
    height: 40px;
    align-items: center;
    .lstime{
      font-size: 12px;
      color: #666;
    } 
  }
  .btnlist{
    padding:20px 0 20px 0;
    display: flex;
    justify-content:flex-end
  }
}

</style>
<style>
  .el-table .warning-row {
    background: #f6f9fe;
  }
  .tagcolor{
    color:#fff
  }
  .colss{

  }
  .querydiv{
    display: flex;
    justify-content: space-between;
  }
</style>
